<template>
  <div class="edit-wrapper" @click="onItemClick(id)" :class="{ active: active }">
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
withDefaults(
  defineProps<{
    id: string
    active: boolean
  }>(),
  {
    active: false
  }
)
const emit = defineEmits<{
  (e: 'set-active', id: string): void
}>()
const onItemClick = (id: string) => {
  console.log('????', id)
  emit('set-active', id)
}

// defineEmits
</script>

<style lang="scss" scoped>
.edit-wrapper {
  padding: 0px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  box-sizing: content-box !important;
  :deep(*) {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
  }
  .resizers {
    display: none;
  }
  &:hover {
    border: 1px dashed #ccc;
  }
  &.hidden {
    display: none;
  }
  &.active {
    border: 1px solid #1890ff;
    user-select: none;
    z-index: 1500;
    .resizers {
      display: block;
      .resizer {
        width: 10px !important;
        height: 10px !important;
        border-radius: 50%;
        background: #fff;
        border: 3px solid #1890ff;
        position: absolute !important;
        &.top-left {
          left: -5px;
          top: -5px;
          cursor: nwse-resize;
        }
        &.top-right {
          right: -5px;
          top: -5px;
          cursor: nesw-resize;
        }
        &.bottom-left {
          left: -5px;
          bottom: -5px;
          cursor: nesw-resize;
        }
        &.bottom-right {
          right: -5px;
          bottom: -5px;
          cursor: nwse-resize;
        }
      }
    }
  }
}
</style>
